/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-26 14:52:51
 * @LastEditors: chenbinfa
 * @LastEditTime: 2023-01-17 11:38:35
 * @description: 描述信息
 * @author: chenbinfa
 */
import React, { useRef, useState, useEffect } from "react";
import { Pie } from '@ant-design/plots';
import { message } from "antd";
import { CopyOutlined } from "@ant-design/icons";
import _ from "lodash";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";
import moment from "moment";
import { formatterCurrency, formatterCurrencyStr, toLocaleString, formatSize, formatterSize, toFixed } from "@utils/format";
import { formatArr } from "@utils/format-show-type";
import common from "@utils/common";
import copy from "copy-to-clipboard";
import api from "@services/";
import DCard from "@/components/DCard";
import * as antdHelper from "@utils/antd-helper";
const Main = ({ className, accountInfo }) => {
    if (!accountInfo) {
        return '';
    }
    const [loading, setLoading] = useState(false);
    const [storageMining, setStorageMining] = useState([]);

    const initStorageMining = async (d) => {
		let data = [
			{
				key: 'power',
				title: 'Power',//power
				n: 3000,
				showType: 'power'
			},
			{
				key: 'verified_space',
				title: 'Verified Space',//
				n: 3000,
				showType: 'store-size-str'
			},
			{
				key: 'service_space',
				title: 'Used Space',//
				n: 3000,
				showType: 'store-size-str'
			},
			{
				key: 'idle_space',
				title: 'Idle Space',//
				n: 3000,
				showType: 'store-size-str'
			},
			{
				key: 'collaterals',
				title: 'Staking',//
				n: 3000300030003000,
				showType: 'balance-logo2'
			},
			{
				key: 'total_reward',
				title: 'Available Reward',//
				n: 3000300030003000,
				showType: 'balance-logo2'
			},
			{
				key: 'unreleased_reward',
				title: 'Unreleased Reward',//
				n: 3000300030003000,
				showType: 'balance-logo2'
			}
		];
		data.forEach(t => {
			t.n = d[t.key];
		});
		formatArr(data);
		data.forEach(t => {
			if (t.render) {
				t.value = t.render(t.n, t);
			}
		});
		setStorageMining(data);
	}

    useEffect(() => {
        initStorageMining(accountInfo.Storage);
    }, [accountInfo]);


    return (
        <div className={className}>
            <DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/storage-power.png"} />} title="Storage Mining">
                <div className="box-con">
                    {
                        storageMining.map(t => {
                            return (<div className="box" key={t.title}>
                                <div className="div">
                                    <span className="span">{t.title}</span>
                                    <label className="label">{t.value}</label>
                                </div>
                            </div>);
                        })
                    }
                </div>
            </DCard>
        </div>
    );
};

export default React.memo(styled(Main)`
    display: block;
`);
